<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>太和殿的脊兽</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <style>
  * {
    margin: 0px;
    padding: 0px;
    list-style: none;
    box-sizing: border-box;
  }

  [v-cloak] {
    display: none;
  }

  body {
    background: #000;
  }

  .playico {
    width: 86px;
    height: 86px;
    position: absolute;
    background: url("emperor/start.png");
    cursor: pointer;
    animation: zd .5s infinite;
  }

  @keyframes zd {
    50% {
      transform: scale(1.2);
    }

  }

  .ok {
    position: absolute;
    color: #fff;
    font-size: 46px;
  }

  #app {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .win {
    width: 1200px;
    height: 693px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .wn {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kj {
    background: url("emperor/start_box.png");
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .gamebg, .gamefront {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
  }

  .gamefront-n {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .gamebg .bg {
    width: 1100px;
    height: 600px;
    background: url(emperor/gamebg_2.jpg) #e7f4d6;
    position: absolute;
    left: 48px;
    top: 48px;
  }

  .gamebg .cloudanim {
    width: 1100px;
    height: 600px;
    position: absolute;
    left: 48px;
    top: 48px;
    overflow: hidden;
  }

  .gamebg .cloudanim .cloud {
    width: 328px;
    height: 90px;
    background: url(emperor/cloud1.png);
    position: absolute;
    left: 20px;
    top: 110px;
    animation: move 32s linear infinite;
  }

  @keyframes move {
    0% {
      left: -328px
    }
    100% {
      left: 1100px
    }

  }

  .gamebg .cloud {
    width: 1100px;
    height: 600px;
    background: url(emperor/cloud.png);
    position: absolute;
    left: 20px;
    top: 48px;
  }

  .gamebg .building {
    width: 1100px;
    height: 600px;
    background: url(emperor/building.png);
    position: absolute;
    left: 20px;
    top: 48px;
  }

  .gamebg .statusbar, .gamefront .statusbar {
    width: 888px;
    height: 149px;
    background: url(emperor/statusbar.png);
    position: absolute;
    left: 50%;
    bottom: 54px;
    transform: translateX(-50%);
    z-index: 1;
  }

  .gamefront .statusbar ul {
    height: 100%;
    display: flex;
  }

  .gamefront .statusbar ul li {
    width: 79px;
    height: 93px;
    display: flex;
    position: absolute;
    cursor: pointer;
  }


  .gamefront .statusbar ul li i {
    color: #fff;
    font-size: 12px;
    position: absolute;
    z-index: 999;
    background: #000;
    padding: 6px 8px;
    border-radius: 5px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-style: normal;
    display: none;
    top: 0;
    user-select: none;
  }

  .gamefront .statusbar ul li:hover i {
    display: block;
  }

  .gamefront .statusbar ul li i:after {
    content: '';
    border-width: 34px 14px;
    border-color: #000 transparent transparent transparent;
    border-style: solid;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 5px;
    z-index: -1;
  }


  .gamefront .statusbar ul li img {
    -webkit-user-drag: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }


  .gamefront .targets {
    position: absolute;
    left: 192px;
    top: 195px;
    display: flex;
  }

  .gamefront .targets li {
    border: 2px dashed #fff;
    width: 73px;
    height: 94px;
    margin: 1px;
    display: flex;
    cursor: pointer;
    justify-content: center;
    align-items: baseline;
  }


  .gamefront .targets li:nth-child(2) {
    margin-top: 11px;
  }

  .gamefront .targets li:nth-child(3) {
    margin-top: 22px;
  }

  .gamefront .targets li:nth-child(4) {
    margin-top: 31px;
  }

  .gamefront .targets li:nth-child(5) {
    margin-top: 40px;
  }

  .gamefront .targets li:nth-child(6) {
    margin-top: 43px;
  }

  .gamefront .targets li:nth-child(7) {
    margin-top: 50px;
  }

  .gamefront .targets li:nth-child(8) {
    margin-top: 56px;
  }

  .gamefront .targets li:nth-child(9) {
    margin-top: 60px;
  }

  .gamefront .targets li:nth-child(10) {
    margin-top: 62px;
  }


  .title {
    color: #fff;
    width: 420px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    left: 50%;
    top: 15px;
    margin-left: -210px;
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    text-shadow: 1px 1px 0px #000000;
  }


  </style>
</head>
<body>
<div id="app">
  <audio ref="audio"></audio>
  <audio src="3.wav" ref="bg" loop></audio>
  <div class="win">
    <div class="wn">
      <div class="gamebg">
        <div class="bg"></div>
        <div class="cloudanim">
          <div class="cloud"></div>
        </div>
        <div class="cloud"></div>
        <div class="building"></div>
        <div class="statusbar"></div>
      </div>
      <div class="kj"></div>
      <div class="title">太和殿的脊兽</div>
      <div v-show="step===1" v-cloak class="playico" @click="next"></div>
      <div v-show="step===2" v-cloak class="gamefront">
        <div class="gamefront-n">
          <div class="statusbar">
            <ul>
              <li :style={left:item.left+'px',top:item.top+'px',zIndex:item.zIndex} v-for="(item,xh) in list"
                  @mousedown="mousedown(item)"
                  @mousemove="mousemove(item)" @mouseup="mouseup(item)" @mouseleave="mouseleave(item)">
                <img :src="'emperor/'+item.img" :style="{opacity:item.down?.8:1}"><i
                  class="tooltip">{{item.title}}</i>
              </li>
            </ul>
          </div>
          <ul class="targets">
            <li v-for="(item,xh) in list"></li>
          </ul>
        </div>
      </div>
      <div v-show="step===3" class="ok" v-cloak>厉害了！！</div>
    </div>
  </div>
</div>
<script src="gsap.min.js" type="text/javascript"></script>
<script src="vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
    el: '#app',
    data: {
        step: 1,
        down: false,
        oldx: 0,
        oldy: 0,
        savex: 0,
        savey: 0,
        position: [],//这个保存正确的位置
        dragListInit: [],//保存可以移动的初始信息
        list: [
            {
                id: 9,
                img: 'animal/animal_3.png',
                title: '龙'
            }, {
                id: 8,
                img: 'animal/animal_9.png',
                title: '凤'
            }, {
                id: 7,
                img: 'animal/animal_1.png',
                title: '狮'
            }, {
                id: 6,
                img: 'animal/animal_7.png',
                title: '海马'
            }, {
                id: 5,
                img: 'animal/animal_6.png',
                title: '天马'
            }, {
                id: 4,
                img: 'animal/animal_5.png',
                title: '押鱼'
            }, {
                id: 3,
                img: 'animal/animal_4.png',
                title: '狻猊'
            }, {
                id: 2,
                img: 'animal/animal_10.png',
                title: '獬豸'
            }, {
                id: 1,
                img: 'animal/animal_2.png',
                title: '斗牛'
            }, {
                id: 0,
                img: 'animal/animal_8.png',
                title: '行什'
            },
        ]
    },
    mounted() {
        this.shuffle(this.list)
        this.list.forEach((el, xh) => {
            this.$set(el, 'down', false)
            this.$set(el, 'zIndex', 0)
            this.$set(el, 'left', xh * 79 + 40)
            this.$set(el, 'top', 40)
        })
        this.dragListInit = JSON.parse(JSON.stringify(this.list));
    },
    watch: {
        step: {
            immediate: true,
            handler(value) {
                if (value === 2) {
                    this.$nextTick(() => {
                        //保存位置
                        let targets = document.querySelector('.targets')
                        let li = targets.querySelectorAll('li')
                        li.forEach((el, xh) => {
                            this.position.push({
                                id: xh,
                                left: el.offsetLeft,
                                top: el.offsetTop,
                                ok: false//ok为true意思是位置上有动物了
                            })
                        })
                    })
                }
            }
        },
        position: {
            immediate: false,
            deep: true,
            handler(value) {
                let fi = value.every((el) => {
                    return el.ok
                })
                if (fi) {
                    this.step = 3
                }
            }
        },
    },
    methods: {
        clickVoice(){
            this.$refs.audio.src='click.wav'
            this.$refs.audio.play()
        },
        bgVoice(){
            this.$refs.bg.play()
        },
        next(){
            this.step=2
            this.clickVoice()
            this.bgVoice()
        },
        shuffle(arr) {
            let i = arr.length;
            while (i) {
                let j = Math.floor(Math.random() * i--);
                [arr[j], arr[i]] = [arr[i], arr[j]];
            }
            return arr
        },
        mousedown(item) {
            this.down = true
            this.oldx = event.pageX
            this.oldy = event.pageY
            this.savex = item.left
            this.savey = item.top
            this.$set(item, 'down', true)
            this.$set(item, 'zIndex', 1000)
        },
        mousemove(item) {
            if (this.down) {
                let left = this.savex + event.pageX - this.oldx
                let top = this.savey + event.pageY - this.oldy
                this.$set(item, 'left', left)
                this.$set(item, 'top', top)
            }
        },
        mouseleave(item) {
            this.mouseup(item)
        },
        mouseup(item) {
            this.clickVoice()
            this.down = false
            this.$set(item, 'down', false)
            let fi = this.dragListInit.filter((el) => {
                return el.id === item.id
            })
            //较对位置
            let statusbarLeft = document.querySelector('.statusbar').offsetLeft
            let statusbarTop = document.querySelector('.statusbar').offsetTop
            let statusbarWidth = document.querySelector('.statusbar').scrollWidth
            let baseBar = statusbarLeft - statusbarWidth / 2
            let targetsLeft = document.querySelector('.targets').offsetLeft
            let targetsTop = document.querySelector('.targets').offsetTop

            let disTop = Math.abs(targetsTop - statusbarTop)
            let disLeft = Math.abs(baseBar - targetsLeft)

            let fix = this.position.filter((el) => {
                return Math.abs(item.left - disLeft - el.left) < 10 && Math.abs(item.top + disTop - el.top) < 10
            })
            if (fix[0]) {
                if (fix[0].id === item.id) {
                    gsap.to(item, .2, {
                        left: fix[0].left + disLeft,
                        top: fix[0].top - disTop,
                        onComplete: () => {
                            this.$set(item, 'zIndex', 0)
                            this.$set(fix[0], 'ok', true)
                        }
                    });

                } else {
                    gsap.to(item, .2, {
                        left: fi[0].left,
                        top: fi[0].top,
                        onComplete: () => {
                            this.$set(item, 'zIndex', 0)
                        }
                    });
                }

            } else {
                gsap.to(item, .2, {
                    left: fi[0].left,
                    top: fi[0].top,
                    onComplete: () => {
                        this.$set(item, 'zIndex', 0)
                    }
                });
            }
        },
    }
})
</script>

</body>

</html>
